<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .search {
      text-align: center;
      padding: 30px 0;
    }

    .search input {
      width: 300px;
      padding: 10px 6px;
    }

    .search button {
      width: 80px;
      height: 40px;
    }

    .info {
      width: 400px;
      margin: 0 auto;
    }

    .info .story {
      padding-top: 15px;
      text-indent: 2em;
    }
  </style>

  <body>
    <!-- 
        1:默认显示第一个英雄
            input的值默认显示 v-model='变量'
            姓名：默认显示    {{}}
            英雄故事：默认显示  v-text
        2:实现搜索功能
            搜索按钮 @click='搜索方法'
            搜索方法:通过输入名字与数组中的name匹配到找相应项的下标，赋值给heroList[该字段]               
     -->
    <div id="app">
      <div class="search">
        <input v-model="inputVal" type="text" placeholder="请输入王者名称" />
        <button @click="search">搜索</button>
      </div>
      <div class="info">
        <h4>姓名：{{heroList[currIndex].name}}</h4>
        <div class="story" v-text="heroList[currIndex].story">英雄故事</div>
      </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
      new Vue({
        el: '#app',
        data: {
          currIndex: 0,
          inputVal: '塞拉斯',
          //英雄数据
          heroList: [
            {
              name: '塞拉斯',
              story:
                '作为一个出生于德玛西亚穷苦家庭的法师，虽然当时塞拉斯还只是一个少年，搜魔人还是将他终身监禁。他使用偷来的魔法杀害了场上所有人，除了饱受惊吓的拉克丝。塞拉斯不是以逃犯的身份离开搜魔人监狱，而是成为了法师反抗的代表。',
              img: [
                'http://ossweb-img.qq.com/images/lol/web201310/skin/big517000.jpg',
                'http://ossweb-img.qq.com/images/lol/web201310/skin/big517001.jpg'
              ]
            },
            {
              name: '妮蔻',
              story:
                '妮蔻来自一个早已迷失的瓦斯塔亚部落。她可以借用别人的外表来伪装自己，融入人群，甚至通过影响别人的情绪状态，一瞬间就能化敌为友。没人知道妮蔻到底在哪儿——或者到底是谁，但是想要为难她的人会立刻见识到她的本色，感受原始的精神魔法倾泻在自己身上的痛苦。',
              img: [
                'http://ossweb-img.qq.com/images/lol/web201310/skin/big518000.jpg',
                'http://ossweb-img.qq.com/images/lol/web201310/skin/big518001.jpg'
              ]
            },
            {
              name: '派克',
              story:
                '在比尔吉沃特的屠宰码头，颇有名气的鱼叉手派克葬身在一条巨大的琢珥鱼腹内……然而，他却回来了。他在家乡的阴街陋巷中徘徊着，用超自然的手段干脆残忍地解决那些鱼肉他人的恶棍——一座因捕猎怪物而自豪的城市如今发觉自己却成了狩猎的目标。',
              img: [
                'http://ossweb-img.qq.com/images/lol/web201310/skin/big555000.jpg',
                'http://ossweb-img.qq.com/images/lol/web201310/skin/big555001.jpg',
                'http://ossweb-img.qq.com/images/lol/web201310/skin/big555009.jpg'
              ]
            },
            {
              name: '卡莎',
              story:
                '在孩童时期就被虚空夺走的卡莎，凭着纯粹的固执和意志力活了下来。她的历练让她成为了一位夺命的猎手，或者也有人会称她为黑暗未来的使者。她与一副有生命的虚空生物甲壳形成了一种不得安宁的共生状态，而很快她就将面临一个重大的抉择，究竟是原谅那些称她为怪物的凡人并协力抵御压境的黑暗……还是干脆忘记，放任虚空吞噬这个已将她抛弃的世界。',
              img: [
                'http://ossweb-img.qq.com/images/lol/web201310/skin/big145000.jpg',
                'http://ossweb-img.qq.com/images/lol/web201310/skin/big145001.jpg',
                'http://ossweb-img.qq.com/images/lol/web201310/skin/big145014.jpg',
                'http://ossweb-img.qq.com/images/lol/web201310/skin/big145015.jpg',
                'http://ossweb-img.qq.com/images/lol/web201310/skin/big145016.jpg',
                'http://ossweb-img.qq.com/images/lol/web201310/skin/big145017.jpg'
              ]
            }
          ]
        },
        methods: {
          search () {
            // 数组方法找出下标的
            // 数组方法:forEach  map   filter  find   findIndex  every  some  indexOf  includes
            let i
            for (i = 0; i < this.heroList.length; i++) {
              if (this.heroList[i].name.includes(this.inputVal)) {
                this.currIndex = i
                return
              }
            }
          }
        }
      })
    </script>
  </body>
</html>
